<template>
  <div class="course-view">
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title"><i class="el-icon-notebook-2"></i>课程管理</h1>
        <p class="page-description">管理学校的课程信息</p>
      </div>
      <div class="header-right"><el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增课程</el-button></div>
    </div>
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="课程名"><el-input v-model="searchForm.name" placeholder="请输入课程名" clearable /></el-form-item>
        <el-form-item label="系名"><el-input v-model="searchForm.departmentName" placeholder="请输入系名" clearable /></el-form-item>
        <el-form-item label="教师名"><el-input v-model="searchForm.teacherName" placeholder="请输入教师名" clearable /></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <el-table :data="tableData" style="width:100%">
        <el-table-column prop="name" label="课程名" />
        <el-table-column prop="teacherName" label="授课教师" />
        <el-table-column prop="credit" label="学分" width="80" />
        <el-table-column prop="grade" label="年级" width="80" />
        <el-table-column prop="maxSize" label="最大人数" width="100" />
        <el-table-column prop="location" label="上课地点" />
        <el-table-column prop="time" label="上课时间" />
        <el-table-column label="操作" width="160" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" class="action-btn edit-btn">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" class="action-btn delete-btn">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,50,100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </el-card>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12"><el-form-item label="课程名" prop="name"><el-input v-model="form.name" placeholder="请输入课程名" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="学分" prop="credit"><el-input-number v-model="form.credit" :min="0" :max="10" /></el-form-item></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"><el-form-item label="授课教师" prop="teacherId"><el-select v-model="form.teacherId" placeholder="请选择授课教师"><el-option v-for="item in teacherOptions" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="年级" prop="grade"><el-input-number v-model="form.grade" :min="2000" :max="2030" /></el-form-item></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"><el-form-item label="最大人数" prop="maxSize"><el-input-number v-model="form.maxSize" :min="1" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="上课地点" prop="location"><el-input v-model="form.location" placeholder="请输入上课地点" /></el-form-item></el-col>
        </el-row>
        <el-form-item label="上课时间" prop="time"><el-input v-model="form.time" placeholder="如：1-1-1" /></el-form-item>
        <el-row :gutter="20">
          <el-col :span="12"><el-form-item label="考试日期" prop="examDate"><el-date-picker v-model="form.examDate" type="datetime" placeholder="选择考试日期时间" value-format="yyyy-MM-dd HH:mm" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="考试地点" prop="examLocation"><el-input v-model="form.examLocation" placeholder="请输入考试地点" /></el-form-item></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer"><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" @click="handleSubmit">确定</el-button></div>
    </el-dialog>
  </div>
</template>
<script>
import { getCoursePage, getCoursePageCount, saveCourse, deleteCourse, getCourseById, getTeacherNames } from '@/api'
export default { name:'CourseView', data(){return{ searchForm:{ name:'', departmentName:'', teacherName:'' }, tableData:[], teacherOptions:[], currentPage:1, pageSize:10, total:0, dialogVisible:false, dialogTitle:'添加课程', form:{ id:-1, name:'', teacherId:'', credit:1, grade:2025, maxSize:30, location:'', time:'', examDate:'', examLocation:'' }, rules:{ name:[{ required:true, message:'请输入课程名', trigger:'blur'}], teacherId:[{ required:true, message:'请选择授课教师', trigger:'change'}], credit:[{ required:true, message:'请输入学分', trigger:'blur'}], grade:[{ required:true, message:'请输入年级', trigger:'blur'},{ type:'number', message:'年级必须为数字', trigger:'blur'}], maxSize:[{ required:true, message:'请输入最大人数', trigger:'blur'}], location:[{ required:true, message:'请输入上课地点', trigger:'blur'}], time:[{ required:true, message:'请输入上课时间', trigger:'blur'}], examDate:[{ required:true, message:'请选择考试日期', trigger:'change'}], examLocation:[{ required:true, message:'请输入考试地点', trigger:'blur'}] } }}, mounted(){ this.loadData(); this.loadTeachers(); }, methods:{ async loadData(){ try{ const countRes = await getCoursePageCount(this.searchForm); this.total = countRes.data * this.pageSize; const res = await getCoursePage(this.currentPage, this.searchForm); this.tableData = res.data || [] } catch(e){ this.$message.error('加载数据失败') } }, async loadTeachers(){ try{ const res = await getTeacherNames(); this.teacherOptions = res.data || [] } catch(e){} }, handleSearch(){ this.currentPage=1; this.loadData() }, resetSearch(){ this.searchForm={ name:'', departmentName:'', teacherName:'' }; this.handleSearch() }, showAddDialog(){ this.dialogTitle='添加课程'; this.form={ id:-1, name:'', teacherId:'', credit:1, grade:2025, maxSize:30, location:'', time:'', examDate:'', examLocation:'' }; this.dialogVisible=true }, async handleEdit(row){ try{ const res = await getCourseById(row.id); this.dialogTitle='编辑课程'; this.form={ ...res.data }; this.dialogVisible=true } catch(e){ this.$message.error('获取课程信息失败') } }, handleDelete(row){ this.$confirm('确定删除该课程吗?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(async()=>{ try{ await deleteCourse(row.id); this.$message.success('删除成功'); this.loadData() }catch(e){ this.$message.error('删除失败') } }) }, async handleSubmit(){ this.$refs.form.validate(async valid=>{ if(valid){ try{ await saveCourse(this.form); this.$message.success(this.form.id===-1?'添加成功':'编辑成功'); this.dialogVisible=false; this.loadData() }catch(e){ this.$message.error(this.form.id===-1?'添加失败':'编辑失败') } } }) }, handleSizeChange(val){ this.pageSize=val; this.loadData() }, handleCurrentChange(val){ this.currentPage=val; this.loadData() } } }
</script>
<style scoped>
.course-view{ padding:24px; min-height:calc(100vh - 120px); background:#f5f6fa; }
.page-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; background:white; padding:24px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); border:1px solid #e8e9ea; }
.header-left{ flex:1; }
.page-title{ margin:0 0 8px 0; font-size:28px; font-weight:700; color:#1a1a1a; display:flex; align-items:center; }
.page-title i{ margin-right:12px; color:#409eff; font-size:32px; }
.page-description{ margin:0; color:#6c757d; font-size:15px; font-weight:400; }
.header-right{ display:flex; align-items:center; }
.search-card{ margin-bottom:20px; }
.table-card{ margin-bottom:20px; }
.el-pagination{ margin-top:20px; text-align:right; }
.action-buttons{ display:flex; gap:8px; justify-content:center; align-items:center; }
:deep(.action-btn){ width:60px!important; height:28px!important; padding:0!important; border-radius:4px!important; font-size:12px!important; display:flex!important; align-items:center!important; justify-content:center!important; min-width:60px!important; }
:deep(.edit-btn){ background-color:#409eff!important; border-color:#409eff!important; color:white!important; }
:deep(.edit-btn:hover){ background-color:#66b1ff!important; border-color:#66b1ff!important; }
:deep(.delete-btn){ background-color:#f56c6c!important; border-color:#f56c6c!important; color:white!important; }
:deep(.delete-btn:hover){ background-color:#f78989!important; border-color:#f78989!important; }
</style>
